<template>
	<view>
		<view class="scroll-text-warp" v-if="isText">
		  <text class="scroll-text scroll-text-one" :style="scrollStyle">{{marqueeText}} </text>
		</view>
		<view class="scroll-text-warp" v-else>
		  <text class="scroll-text" :style="scrollStyle"> {{marqueeText}} </text>
		  <text class="scroll-text" :style="scrollStyle"> {{marqueeText}} </text>
		</view>

	</view>
</template>

<script>
	export default {
		name:"marquee",
		props: {
			marqueeText: {
			  type: String,
			  default: ''
			},
			marqueePace: {
			  type: Number,
			  default: 0.2
			},
		},
		data() {
			return {
				scrollStyle:'',
				viewTLength:'',
				textLength:'',
				isText:true,
			};
		},
		mounted(){
			this.$nextTick(()=>{
				this.getInit()
			})
		},
		methods:{
			async getInit() {
			  var _this = this
			 // 创建选择器对象
			 let query = uni.createSelectorQuery().in(this);
			 let queryTwo = uni.createSelectorQuery().in(this);
			 // 选择节点
			  query.select('.scroll-text-warp').boundingClientRect(res => {
			   // data是节点信息，如宽、高等
			   _this.viewTLength = res.width
			   queryTwo.select('.scroll-text').boundingClientRect(vo=>{
			      _this.textLength = vo.width
			      _this.assignment()
			   }).exec()
			 }).exec(); // 执行查询
			 },
			 // 赋值
			 assignment(){
			   var textLength = this.textLength
			   var viewTLength = this.viewTLength
			   if(viewTLength > textLength){
			     this.scrollStyle = `animation: none;`;
				 this.isText = true
			   }else{
			     var marqueeTextLength = this.marqueeText.length;
			     var animationDuration = (marqueeTextLength*this.marqueePace) + 's';
			     this.scrollStyle = `animation-duration: ${animationDuration};`;
				 this.isText = false
			   }
			 },
		}
	}
</script>

<style scoped>
.scroll-text-warp {
  width: 100%;
  overflow: hidden;
  display: flex;
}
.scroll-text {
  white-space: nowrap;
  display: inline-block;
  animation: scrollText 10s linear infinite;
/*  animation-name:scrollText;
  animation-name:scrollText;
  animation: scrollText ${animationDuration} linear infinite; */
  padding-left: 40rpx;
}
.scroll-text-one{
  white-space: nowrap;
  display: inline-block;
  padding-left: 0;
}

@keyframes scrollText {
	0% {
		transform: translateX(0%);
		/* 开始位置 */
	}

	100% {
		transform: translateX(-100%);
		/* 结束位置 */
	}
}

</style>